<template>
    <div id="percentileFigure"></div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: 'PercentileFigure',
    mounted () {
        this.init()
    },
    computed: {
        ...mapGetters({
            univariateData: 'common/getUnivariateData'
        })
    },
    watch: {
        univariateData () {
            this.init()
        }
    },
    methods: {
        init () {
            let list = this.univariateData['百分位']
            let option = {
                dataZoom: [{
                    type: 'inside'
                }],
                tooltip: {
                    confine: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: list.map((v, i) => `${i + 1}`)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: list,
                        type: 'scatter',
                        barMaxWidth: 30,
                        showSymbol: false,
                        itemStyle: {
                            normal: {
                                color: '#2680EB'
                            }
                        }
                    }
                ]
            }
            let myChart = this.$echarts.init(document.getElementById('percentileFigure'))
            myChart.setOption(option, true)
        }
    }
}
</script>
<style lang="less">
    #percentileFigure {
        height: 400px;
        width: 100%;
    }
</style>
